<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios练习</title>
	</head>
	<body>
		<!-- 定义VUE根标签 -->
		<div id="app">
				<div align="center">
						<h1 align="center">用户新增</h1>
						名称: <input type="text" v-model.trim="addUser.name"/>
						年龄: <input type="text" v-model.number="addUser.age"/>
						性别: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">新增</button>
				</div>
				<hr />
				<div align="center">
					<!--  -->
					<h1>用户修改</h1>
					编号: <input type="text" v-model="updateUser.id" disabled />
					名称: <input type="text" v-model.trim="updateUser.name"/>
					年龄: <input type="text" v-model.number="updateUser.age"/>
					性别: <input type="text" v-model.trim="updateUser.sex" />
					
					<button @click="updateUserMe">提交</button>
				</div>
				
				<table id="tab1" border="1px" align="center" width="80%">
					<tr>
						<td colspan="5" align="center"><h1>用户列表</h1></td>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<!-- 指令: 可以循环数据+标签  v-for -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td>
							<button @click="updateUserBtn(user)">修改</button>
							<button  @click="deleteUser(user)">删除</button>
						</td>
					</tr>
				</table>
		</div>
			
		<!-- 1.引入VUE.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入Axios.js -->
		<script src="../js/axios.js"></script>
		
		<!-- 
				需求分析1:
					1.当用户打开页面时就应该发起Ajax请求获取userList数据.
					2.将userList数据 在页面中展现  
							2.1页面中的数据必须在data中定义
							2.2 ajax请求的结果赋值给data属性
					3.利用v-for指令实现数据遍历
					
				需求分析2:  用户数据入库操作
					1.在页面中准备用户新增文本框/按钮
					2.准备双向数据绑定的规则
					3.为按钮添加事件,实现数据新增入库.
							
		 -->
		<script>
				//设定axios请求前缀
				axios.defaults.baseURL = "http://localhost:8090"
				const app = new Vue({
					el: "#app",
					data: {
						//1.定义集合数据 null
						userList: [],
						//2.定义addUser对象  新增的用户数据
						addUser: {
							name: '',
							age: 0,
							sex: ''
						},
						updateUser: {
							id: '',
							name: '',
							age:  0,
							sex: ''
						}
					},
					methods: {
						//1.定义getuserList方法 获取后台服务器数据
						async getUserList(){
							let{data: result} = await axios.get("/vue/getUserList")
							//ajax调用之后,将数据给属性.
							this.userList = result
						},
						//新增操作 请求类型: post  接收时需要使用json方式处理
						async addUserMe(){
								//不需要返回值
								await axios.post("/vue/insertUser",this.addUser)
								//将列表页面重新刷新
								this.getUserList()
						},
						async deleteUser(user){
							//console.log(user)
							//只需要获取用户id 就可以完成删除的操作
							//方法选择 ?id=xx 拼接    restful
							let id=user.id
							await axios.delete("/vue/deleteUser?id="+id)
							alert("删除数据成功")
							//删除数据后,需要重新获取列表数据
							this.getUserList()//重新获取列表数据
							//await axios.delete(`/vue/deleteUser?id=${id}`)
						},
						//点击修改按钮时触发的事件
						updateUserBtn(user){
							console.log(user)
							this.updateUser=user
						},
						//1.是否发起ajax请求2.参数是谁 updateUser3.什么请求类型PUT
						//this.updateUser是js对象 传递后端json串 @RequestBody
						async updateUserMe(){
							await axios.put("/vue/updateUser",this.updateUser)
							//如果操作成功,则应该清空修改对象
							this.updateUser={}
							this.getUserList()//刷新==重新获取列表信息
							alert("修改操作成功")
						}
					},
					//调用生命周期函数
					mounted(){
						//console.log("vue对象实例化成功!!!!")
						//初始化时调用getUserList()
						this.getUserList()
					}
				})
		</script>
	</body>
</html>